<template>
  <a-layout-sider class="layout-sider" :width="260">
    <a-menu
        mode="inline"
        theme="dark"
        :selectedKeys="selectedKeys"
        :inline-collapsed="collapsed"
        @click="menuClick"
    >
      <template v-for="(item) in menuData">
        <a-menu-item class="menu-item" v-if="!item.children" :key="item.name">
          <span>{{ item.meta.title }}</span>
        </a-menu-item>
        <a-sub-menu class="menu-item" v-else :key="item.name">
          <span slot="title">
            <span>{{ item.meta.title }}</span>
          </span>
          <template v-for="(subItem) in item.children">
            <a-menu-item :key="subItem.name">
              <span>{{ subItem.meta.title }}</span>
            </a-menu-item>
          </template>
        </a-sub-menu>
      </template>


    </a-menu>
  </a-layout-sider>
  <!--<side-menu class="layout-sider" :theme="'night'" :menuData="menuData" :collapsed="false" :collapsible="false"></side-menu>-->
</template>

<script>
// import SideMenu from "@/components/menu/SideMenu";
import {mapGetters} from 'vuex'

export default {
  name: "layout-sider",
  components: {},
  computed: {
    ...mapGetters(['menuData']),
  },
  data() {
    return {
      collapsed: false,
      selectedKeys: []
    };
  },
  methods: {
    toggleCollapsed() {
      this.collapsed = !this.collapsed;
    },
    menuClick({key}) {
      // console.log(item, key, keyPath)
      this.$router.push({name: key})
      this.selectedKeys = [this.$route.name]
    }
  },
  created() {
    // console.log(this.$route, this.menuData)
    this.selectedKeys = [this.$route.name]
  }
};
</script>

<style scoped lang="less">
.layout-sider {
  margin-bottom: -48px;
  padding: 10px;
  background: url("~@/assets/img/layout/layout-side-bg.png") no-repeat bottom /
    95% 100%;
  background-color: transparent;
  overflow: auto;

  .menu-item {
    font-family: YouSheBiaoTiHei;
    .ant-menu-item {
      font-family: OPPOSans;
    }
  }

  .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
    background: url('~@/assets/img/layout/menu-active-bg.png')  no-repeat center left  / 100% 100%;
  }
}
</style>
